<template>
    <div style="background-color: #d6f1ea;width: 100%;height: 110vh">
        <!--v-for="e in this.List.length" :key="e"循环从1开始-->
        <!--<div v-for="e in this.List.length" :key="e" class="text item">
            <el-card class="box-card">
                <div>
                    {{List[e]}}
                </div>
            </el-card>
        </div>-->
        <!--v-for="(n,index) in this.List.length" :key="index"循环从0开始-->
        <!--<div v-for="(n,index) in this.List.length" :key="index" class="text item">
            <el-card class="box-card" @click.native="detial(List[index])">
                <div>
                    {{List[index].uname}}
                </div>
            </el-card>
        </div>-->
        <div class="CarStyle">
            <div v-for="(n,index) in this.KnowledgeList.length" :key="index" class="text item">
                <div style="height: 10px">
                </div>
                <el-card  shadow="hover" @click.native="getKnowledgeById(KnowledgeList[index])">
                    <div>
                        {{KnowledgeList[index].title}}
                    </div>
                </el-card>
                <div style="height: 10px">
                </div>
            </div>
        </div>
        <div style="display:flex;align-items:center;justify-content:center;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           small
                           background
                           :page-size="pageSize"
                           layout="prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                List: [{"uname": "11111111111", "h": "2222222222222"},
                    {"uname": "3333333333333", "h": "4444444444444"},
                    {"uname": "555555555555", "h": "66666666666"},
                    {"uname": "8888888888", "h": "99999999"}],
                KnowledgeList: [{"id": "", "title": "", "article": ""}],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 7,// 每页的数据条数
                ID: "",
                page:1,
            }
        },
        created() {
            this.getKnowledge()
        },
        methods: {
            detial(event) {
                /*
                console.log(event.currentTarget)
                console.log(event.currentTarget.innerHTML)
                console.log(event.currentTarget.innerHTML.a)*/
                console.log(event)
                console.log(event.uname)
            },

            getKnowledgeById(event) {
                console.log(event.id)
                /*携带参数跳转页面*/
                this.ID = event.id
                this.$router.push({
                    path: "/KnowledgeDetail",
                    query: {
                        Id: this.ID
                    },
                });
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },

            async getKnowledge() {
                const {data: res} = await this.$http.get("getAllKnowledge?page="+this.page);
                console.log(res);
                this.KnowledgeList = res.allKnowledgeByPage;
                this.total = res.longi;

            },

            async handleCurrentChange(val) {
                this.page = val
                const {data: res} = await this.$http.get("getAllKnowledge?page="+this.page);
                console.log(res);
                this.KnowledgeList = res.allKnowledgeByPage;
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        }
    }
</script>

<style scoped>
    .CarStyle{
        width: 60%;
        padding-left: 20%;
    }
</style>